<template>
  <div class="dashboard-container">
    <div class="dashboard-sidebar">
      <el-menu
        :default-active="activeDashboard"
        class="dashboard-menu"
        background-color="#304156"
        text-color="#fff"
        active-text-color="#409EFF"
        @select="handleSelect"
      >
        <template v-for="item in dashboardStructure" :key="item.id">
          <!-- 有子项的目录 -->
          <el-sub-menu v-if="item.children && item.children.length" :index="item.id">
            <template #title>
              <el-icon><Folder /></el-icon>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item 
              v-for="child in item.children" 
              :key="child.id" 
              :index="child.id"
            >
              <el-icon><Monitor /></el-icon>
              <span>{{ child.name }}</span>
            </el-menu-item>
          </el-sub-menu>
          
          <!-- 没有子项的仪表盘 -->
          <el-menu-item v-else :index="item.id">
            <el-icon><Monitor /></el-icon>
            <span>{{ item.name }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </div>
    
    <div class="dashboard-content">
      <div v-if="currentDashboard" class="dashboard-header">
        <h2>{{ currentDashboard.name }}</h2>
      </div>
      <div v-else class="dashboard-placeholder">
        <el-empty description="请选择一个仪表盘" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Monitor, Folder } from '@element-plus/icons-vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

// 配置后端API基础URL
const API_BASE_URL = 'http://localhost:5000/api'

// 类型定义
interface DashboardItem {
  id: string
  name: string
  type: string
  children?: DashboardItem[]
}

// 状态
const dashboardStructure = ref<DashboardItem[]>([])
const activeDashboard = ref('')
const currentDashboard = ref<DashboardItem | null>(null)

// 加载仪表盘结构
const loadDashboardStructure = async () => {
  try {
    const response = await axios.get(`${API_BASE_URL}/dashboard/structure`)
    if (response.data.code === 0) {
      dashboardStructure.value = response.data.data || []
    } else {
      throw new Error(response.data.message || '加载仪表盘结构失败')
    }
  } catch (error) {
    console.error('加载仪表盘结构错误:', error)
    ElMessage.error('加载仪表盘结构失败')
  }
}

// 处理仪表盘选择
const handleSelect = async (index: string) => {
  activeDashboard.value = index
  try {
    const response = await axios.get(`${API_BASE_URL}/dashboard/${index}`)
    if (response.data.code === 0) {
      currentDashboard.value = response.data.data
    } else {
      throw new Error(response.data.message || '加载仪表盘数据失败')
    }
  } catch (error) {
    console.error('加载仪表盘数据错误:', error)
    ElMessage.error('加载仪表盘数据失败')
  }
}

// 在组件挂载时加载仪表盘结构
onMounted(() => {
  loadDashboardStructure()
})
</script>

<style scoped>
.dashboard-container {
  display: flex;
  height: 100%;
  background-color: #f0f2f5;
}

.dashboard-sidebar {
  width: 240px;
  background-color: #304156;
  height: 100%;
  overflow-y: auto;
}

.dashboard-menu {
  border-right: none;
}

.dashboard-menu :deep(.el-menu-item) {
  height: 50px;
  line-height: 50px;
}

.dashboard-menu :deep(.el-menu-item.is-active) {
  background-color: #263445 !important;
}

.dashboard-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.dashboard-header {
  margin-bottom: 20px;
}

.dashboard-header h2 {
  margin: 0;
  color: #303133;
  font-size: 20px;
}

.dashboard-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style> 